<template>
  <div>
    <!-- This is score analyse page! -->

    <el-main>

      <!-- 返回 -->
      <el-button type="primary" size="medium" plain @click="goBack()">返回</el-button>

      <el-card style="margin-top: 12px;">
        <el-row class="row-card">
          <el-col :span="16" class="header-col"
            >课程平均分: {{ averageScore }}&nbsp;&nbsp;&nbsp;
            不及格人数: {{ failNumber}}&nbsp;&nbsp;&nbsp;
          </el-col>
        </el-row>
      </el-card>

      <el-row :gutter="20" style="margin-top: 12px;">
        <el-col :span="8" :offset="0">
          <el-card class="row-card">
            <div id="pie-chart"></div>
          </el-card>
        </el-col>
        <el-col :span="16" :offset="0">
          <el-card class="row-card">
            <div id="line-chart"></div>
          </el-card>
        </el-col>
      </el-row>


      <!-- 展示所有的分数详情 -->
      <el-card style="margin-top: 20px;" shadow="always" :body-style="{ padding: '20px' }">
      <el-table
        :data="scoreList"
        style="width: 100%;"
        :header-cell-style="{background:'#F3F4F7'}"
        border>
        <el-table-column
          label="#"
          align="center"
          type="index">
        </el-table-column>
        <el-table-column
          label="学号"
          align="center"
          prop="student_num"
          width="">
        </el-table-column>
        <el-table-column
          label="姓名"
          align="center"
          prop="name"
          width="">
        </el-table-column>
        <el-table-column
          prop="class_name"
          align="center"
          label="学生专业">
        </el-table-column>
        <el-table-column
          label="平时成绩"
          width="100"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.usual_score || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          label="考试成绩"
          width="100"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.exam_score || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="final_score"
          label="综合成绩"
          align="center">
        </el-table-column>
        <el-table-column
          label="是否缺考"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.is_absent === 0? '否' : '是' }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        style="float: right; padding: 10px;"
        :page-size="10"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :total="studentNum">
      </el-pagination>
      </el-card>

    </el-main>

  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  data () {
    return {
      studentNum: 0,
      scoreList: [],
      currentPage: 1,
      averageScore: 0,
      failNumber: 0,
    }
  },
  created () {
    this.getScoreList()
  },
  mounted () {
    this.renderPieChart()
    this.renderLineChart()
  },
  methods: {
    // 返回
    goBack () {
      // 去除所有的记录
      window.localStorage.clear()
      this.$router.push('/teacher/analysescore')
    },

    async getScoreList () {
      const examId = window.localStorage.getItem('examId')
      const { data: res } = await this.$http.post(`score/teacher/getStudentByIdWithPieAndLine?page=${this.currentPage - 1}&rows=10&id=${examId}`)
      console.log(res)
      if (!res.state) return this.$message.error(res.msg)
      this.scoreList = res.detail.baseInfo.studentScoreList.list
      this.averageScore = res.detail.averageScore.toFixed(1)
      this.failNumber = res.detail.failNumber
      this.studentNum = res.detail.baseInfo.studentScoreList.total
    },

    // 饼图
    async renderPieChart () {
      const chart = echarts.init(document.getElementById("pie-chart"));

      const examId = window.localStorage.getItem('examId')
      const { data: res } = await this.$http.post(`score/teacher/getStudentByIdWithPieAndLine?page=0&rows=10&id=${examId}`)
      const pie_data = res.detail.pie

      var option = {
        title: {
          text: '各分数段占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical',
          // left: 'right'
          bottom: 'bottom'
        },
        series: [
          {
            name: '分数',
            type: 'pie',
            radius: '50%',
            // data: [
              // { value: 1.2, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              // { value: 484, name: 'Union Ads' },
              // { value: 300, name: 'Video Ads' }
            // ],
            data: pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      chart.setOption(option)
    },

    // 折线图
    async renderLineChart () {
      const chart = echarts.init(document.getElementById("line-chart"));

      const examId = window.localStorage.getItem('examId')
      const { data: res } = await this.$http.post(`score/teacher/getStudentByIdWithPieAndLine?page=0&rows=10&id=${examId}`)
      const line_name = res.detail.line.name
      const line_data = res.detail.line.value

      var option = {
        title: {
          text: '分数段显示'
        },
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: line_name
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],
            data: line_data,
            type: 'line',
            smooth: true
          }
        ]
      };

      chart.setOption(option)
    },

    // 更改当前页
    handleCurrentChange (page) {
      this.currentPage = page
      this.getScoreTable()
    },
  }
}
</script>

<style lang="less" scoped>
#pie-chart {
  height: 400px;
}
#line-chart {
  height: 400px;
}
</style>
